<template>
  <el-main class="basic-config">
    <div class="basic-box">
            <div class="basic-box-title">主体信息</div>
            <div class="basic-box-item sa-flex">
              <div class="basic-box-item-label">主体类型</div>
              <div class="basic-box-item-text">个体工商户</div>
            </div>
            <div class="basic-box-item sa-flex">
              <div class="basic-box-item-label">主体身份</div>
              <div class="basic-box-item-text">普通企业</div>
            </div>
            <div class="basic-box-item sa-flex">
              <div class="basic-box-item-label">营业执照类型</div>
              <div class="basic-box-item-text">三证合一</div>
            </div>
            <div class="basic-box-item sa-flex">
              <div class="basic-box-item-label">证件注册号/统一社会信用代码</div>
              <div class="basic-box-item-text">9233*****333222222</div>
            </div>
            <div class="basic-box-item sa-flex">
              <div class="basic-box-item-label">商户名称</div>
              <div class="basic-box-item-text">执照企业名称</div>
            </div>
            <div class="basic-box-item sa-flex">
              <div class="basic-box-item-label">经营者/法定代表姓名</div>
              <div class="basic-box-item-text">张三</div>
            </div>
            <div class="basic-box-item sa-flex">
              <div class="basic-box-item-label">注册地址</div>
              <div class="basic-box-item-text">浙江省杭州市XXXXXX</div>
            </div>
            <div class="basic-box-item sa-flex">
              <div class="basic-box-item-label">营业期限</div>
              <div class="basic-box-item-text">2025-01-01 至 长期</div>
            </div>
            <div class="basic-box-item sa-flex sa-col-top">
              <div class="basic-box-item-label">营业执照照片</div>
              <el-image class="basic-box-item-image" :src="checkUrl(state.data?.business_license)" :fit="'cover'" />
            </div>
          </div>
          <div class="basic-box sa-m-t-20">
            <div class="basic-box-title">经营者/法人身份证信息</div>
            <div class="basic-box-item sa-flex">
              <div class="basic-box-item-label">身份证姓名</div>
              <div class="basic-box-item-text">张三</div>
            </div>
            <div class="basic-box-item sa-flex">
              <div class="basic-box-item-label">身份证号码</div>
              <div class="basic-box-item-text">3300222222222222</div>
            </div>
            <div class="basic-box-item sa-flex sa-col-top">
              <div class="basic-box-item-label">身份证照片</div>
              <div>
                <el-image class="basic-box-item-image" :src="checkUrl(state.data?.business_license)" :fit="'cover'" />
                <div>身份证头像面</div>
                  
              </div>
              <div>
                <el-image class="basic-box-item-image" :src="checkUrl(state.data?.business_license)" :fit="'cover'" />
                <div>身份证国徽面</div>
              </div>
            </div>
          </div>
          <div class="basic-box sa-m-t-20">
            <div class="basic-box-title">结算账户信息</div>
            <div class="basic-box-item sa-flex">
              <div class="basic-box-item-label">账户类型</div>
              <div class="basic-box-item-text">对私账户</div>
            </div>
            <div class="basic-box-item sa-flex">
              <div class="basic-box-item-label">开户名称</div>
              <div class="basic-box-item-text">张三</div>
            </div>
            <div class="basic-box-item sa-flex">
              <div class="basic-box-item-label">开户银行</div>
              <div class="basic-box-item-text">工商银行</div>
            </div>
            <div class="basic-box-item sa-flex">
              <div class="basic-box-item-label">银行账号</div>
              <div class="basic-box-item-text">222222222222</div>
            </div>
          </div>
    
  </el-main>
</template>

<script setup>
  import { reactive, onMounted } from 'vue';
  import {api} from '../info.service'
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';

  const state = reactive({
    data: null,
  });

  onMounted(() => {
    getData();
  });

  const getData = async () => {
    const {error,data} = await api.basic.info()
    if (error === 0) {
      state.data = data
    }
  };
</script>

<style lang="scss" scoped>

  .basic-box {
    .basic-box-title {
      width: max-content;
      position: relative;
      font-family: 'PingFangSC-Regular, sans-serif';
      color: #3D3D3D;
      z-index: 0;
      font-size: 20px;
      font-weight: bold;
    }

    .basic-box-title::after {
    //   pointer-events: none;
    //   content: "";
    //   position: absolute;
    //   height: 8px;
    //   background: var(--t-bg-active);
    //   bottom: 0;
    //   right: 0;
    //   left: 0;
    //   z-index: -1;
    }

    .basic-box-item {
      padding-left: 40px;
      margin-top: 20px;

      .basic-box-item-label {
        min-width: 300px;
        font-family: 'PingFangSC-Regular, sans-serif';
        font-size: 14px;
        color: #9c9c9c;
        margin-right: 20px;
      }

      .basic-box-item-text {
        font-family: 'PingFangSC-Regular, sans-serif';
        font-size: 14px;
        color: #3D3D3D;
      }

      .basic-box-item-image {
        width: 225px;
        height: 150px;
        margin-right: 40px;
      }
    }
  }
</style>
